<template>
	<div>
		<smpPanel>
			<el-form :inline="false" label-width="140px" size="mini" ref="form" :model="query.body">

				<el-row>
					<el-col :span="22">
						<el-col :span="8">
							<el-form-item label="需求编号:">
								<el-select v-model="query.body.qmsNo" style="width: 100%" clearable filterable remote
									reserve-keyword placeholder="请输入需求编号或名称" :loading="qmsLoading" @change="qmsChange"
									:remote-method="getRequirementList">
									<el-option v-for="item in requirelist" :key="item.qmsNo" :label="item.qmsNo"
										:value="item.qmsNo">
										<span style="float: left;margin-left: 3px;">{{ item.qmsNo }}</span>
										<span style="float: right;margin-right: 3px;">{{ item.qmsName }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="工单类型:">
								<el-select clearable v-model="query.body.applyType" style="width: 100%"
									placeholder="工单类型" @change="getList">
									<el-option v-for="item in dict('SMP0009')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="工单状态:">
								<el-select clearable v-model="query.body.status" style="width: 100%" placeholder="工单状态"
									@change="getList">
									<el-option v-for="item in dict('SMP0012')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="申请人:">
								<el-select v-model="query.body.applyUser" style="width: 100%" filterable remote
									clearable reserve-keyword placeholder="申请人" :remote-method="getUsers"
									@change="getList">
									<el-option v-for="item in userList" :key="item.userName"
										:label="item.userChineseName" :value="item.userName">
										<span style="float: left;margin-left: 3px;">{{ item.userChineseName }}</span>
										<span
											style="float: right;margin-right: 3px;">{{ $store.getters.getUser(item.userName).orgName }}</span>
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="申请日期(起始):" prop="applyDateStart">

								<el-date-picker style="width: 100%" v-model="query.body.applyDateStart" type="date"
									@change="getList" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="申请日期(结束):" prop="applyDateEnd">

								<el-date-picker style="width: 100%" v-model="query.body.applyDateEnd" type="date"
									@change="getList" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-col>
					<el-col :span="2">
						<searchButtonGroup @search="onSubmit" @reset="reset"  />
					</el-col>
				</el-row>
			</el-form>
		</smpPanel>
		<smpPanel title="工单列表">
			<el-table :data="list" size="mini" stripe style="width: 100%">
				<el-table-column prop="id" label="工单编号" align="center" width="200px">
				</el-table-column>
				<el-table-column prop="qmsNo" label="需求编号" align="center" width="200px">
				</el-table-column>
				<el-table-column prop="qmsName" show-overflow-tooltip label="需求名称" align="center">
				</el-table-column>

				<el-table-column prop="applyDate" label="申请日期" width="150px" align="center">
				</el-table-column>

				<el-table-column prop="applyUser" label="申请人" width="150px" align="center">
					<template slot-scope="scope">
						<userCard :user="$store.getters.getUser(scope.row.applyUser)"></userCard>
					</template>
				</el-table-column>
				<el-table-column prop="applyType" label="工单类型" width="100px" align="center">
					<template slot-scope="scope">
						{{scope.row.applyType|dictName("SMP0009")}}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="工单状态" width="150px" align="center">
					<template slot-scope="scope">
						{{scope.row.status|dictName("SMP0012")}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-link size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="handleEdit(scope.$index, scope.row)">详情</el-link>
						<el-divider direction="vertical"></el-divider>
						<el-link
							v-if="(scope.row.status=='0' ||scope.row.status=='10'||scope.row.status=='3'||scope.row.status=='7'||scope.row.status=='9'||scope.row.status=='11') && scope.row.applyUser == that.$store.getters.getActiveUser().userName"
							size="mini" type="primary" :underline="false" style="font-size: 12px;"
							@click="demandApplication(scope.$index, scope.row)">编辑</el-link>
						<el-link v-else :disabled="true" size="mini" type="info" :underline="false"
							style="font-size: 12px;" @click="demandApplication(scope.$index, scope.row)">编辑</el-link>
					</template>
				</el-table-column>
			</el-table>
			<div class="smp-pagination" v-show="total>0">
				<el-pagination background plain size="mini" layout="total,sizes,prev, pager, next,jumper"
					:page-size="query.pageSize" :page-sizes="[5,10,15,20]" :total="total" :current-page="query.pageNum"
					@current-change="currentChange" @size-change="sizeChange">
				</el-pagination>
			</div>
		</smpPanel>
	</div>
</template>

<script>
	"use strict";
	import {
		getDemandByPage
	} from '@/api/demand.js';

	import {
		getRequirementInfoList
	} from '@/api/requirementInfo.js';

	export default {
		data() {
			return {
				that: this,
				total: 0,
				title: '工单列表',
				expand: false,
				columns: [{
						title: '序号',
						dataIndex: 'id',
						align: 'center'
					},
					{
						title: '需求编号',
						dataIndex: 'qmsNo',
						align: 'center'
					},
					{
						title: '需求名称',
						dataIndex: 'qmsName',
						align: 'center'
					},
					{
						title: '工单类型',
						dataIndex: 'applyType',
						align: 'center',
						scopedSlots: {
							customRender: 'applyType'
						}
					},
					{
						title: '工单状态',
						dataIndex: 'status',
						align: 'center',
						scopedSlots: {
							customRender: 'status'
						}
					},
					{
						title: '主系统',
						dataIndex: 'mainSystemNo',
						align: 'center'
					},
					{
						title: '申请人',
						dataIndex: 'applyUser',
						align: 'center'
					},
					{
						title: '当前处理人',
						dataIndex: 'curUser',
						align: 'center'
					},
					{
						title: '申请时间',
						dataIndex: 'appltDate',
						align: 'center'
					},

				],
				list: [],
				requirelist: [],

				query: {
					body: {
						/* id: '',
						qmsNo: '',
						applyType: '',
						applyUser: '',
						applyDateStart: '',
						applyDateEnd: '',
						status: '', */
					},
					pageNum: 1,
					pageSize: 5
				},
				showVisible: false,
				record: {},
				qmsLoading: false

			};



		},
		created() {
			/* if(!this.vaildPermission('SA0005')){
				this.query.body.applyUser = this.$store.getters.getActiveUser().userName;
			} */
			this.userList = this.userListAll;

			Object.assign(this.query.body, this.$route.query);
			/* Object.assign(this.query,this.$route.query);
		    Object.assign(this.query,this.$route.query);
			 */
			if (this.$route.query.pageNum != undefined) {
				this.query.pageNum = this.$route.query.pageNum;
			}
			if (this.$route.query.pageSize != undefined) {
				//this.query1.pageSize =this.$route.query.pageSize1;
				this.query.pageSize = parseInt(this.$route.query.pageSize);
			}


			this.getList()
		},
		methods: {
			demandApplication(index, row) {
				let query = {};
				Object.assign(query, row);
				query.sid = row.id;
				this.$router.push({
					name: 'demandApplication',
					query: query
				})
			},

			/**
			 * 获取需求列表
			 */
			getRequirementList(query) {

				if (query != '') {
					this.qmsLoading = true;
					getRequirementInfoList({
						query: query
					}).then(response => {
						this.requirelist = response.data.extend;
						this.qmsLoading = false;
					});
				}

			},


			qmsChange(val) {
				this.getList();
			},


			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			},

			onSubmit() {
				this.getList();
			},

			handleClick() {
				this.dialogVisible = true;
			},

			handleEdit(index, row) {
				this.$router.push({
					name: 'demandDetails',
					query: Object.assign(row)
				})
			},



			getrequireList(query) {
				if (query == '1142') {
					this.requireNooptions = [{
						value: 'REQM2022_1142_ESBYX_0003',
						label: 'REQM2022_1142_ESBYX_0003',
						name: '外部数据接入新增接口（企业服务总线（ESB）配合）'
					}]
				} else {
					this.requireNooptions = [];
				}
			},

			reset() {
				this.query.body = {}
				//this.$refs["form"].resetFields();
				this.getList();

			},

			getList() {
				getDemandByPage(this.query).then(response => {
					this.list = response.data.extend.list
					this.total = response.data.extend.total;

					let query = {};
					Object.assign(query, this.query.body);
					query.pageNum = this.query.pageNum;
					query.pageSize = this.query.pageSize;
					this.$router.push({
						query: query
					}, () => {})

				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
			},

			currentChange(val) {
				this.query.pageNum = val;
				this.getList();
			},
			sizeChange(val) {
				this.query.pageSize = val;
				this.query.pageNum = 1;
				this.getList();
			}


		}
	}
</script>

<style>
</style>
